import ProSwitchButton from '@/components/pro-switch-button/index.vue'
import { Ref } from 'vue'
import { ProFormOptions } from '@/components/pro-form/type'

type props = {
  handleType: Ref<'add' | 'edit' | ''>
}

export const useDictDataProForm = ({ handleType }: props) => {
  const [dictDataForm, resetDictDataForm] = useProRef<{ [index: string]: any }>(
    {
      validFlag: true
    }
  )
  const dictDataFormOptions = computed<ProFormOptions>(() => [
    {
      grid: {
        cols: '1'
      },
      columnItemList: [
        {
          formItem: {
            visiable: handleType.value === 'edit',
            formType: 'input',
            label: '字典标识',
            key: 'type',
            disabled: true
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '字典标签',
            key: 'label',
            rule: {
              required: true,
              message: '请输入字典标签',
              trigger: ['input']
            },
            placeholder: '请输入字典标签'
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '字典键值',
            key: 'value',
            rule: {
              required: true,
              message: '请输入字典键值',
              trigger: ['input']
            },
            placeholder: '请输入字典键值'
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '快捷输入',
            key: 'hotkey'
          }
        },
        {
          formItem: {
            formType: 'select',
            label: '回显样式',
            key: 'listClass',
            placeholder: '请选择回显样式',
            clearable: true,
            options: [
              {
                label: '主要(primary)',
                value: 'primary'
              },
              {
                label: '成功(success)',
                value: 'success'
              },
              {
                label: '信息(info)',
                value: 'info'
              },
              {
                label: '警告(warning)',
                value: 'warning'
              },
              {
                label: '危险(error)',
                value: 'error'
              }
            ]
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '样式属性',
            key: 'cssClass',
            placeholder: '请输入样式属性'
          }
        },
        {
          formItem: {
            formType: 'inputNumber',
            label: '显示排序',
            key: 'sortOrder',
            rule: {
              type: 'number',
              required: true,
              message: '请输入显示排序',
              trigger: ['input']
            },
            placeholder: '请输入显示排序'
          }
        },

        {
          formItem: {
            formType: 'custom',
            label: '状态',
            key: 'accountNonLocked',
            render() {
              return (
                <ProSwitchButton
                  v-model:value={dictDataForm.value.validFlag}
                  checkedText="正常"
                  uncheckedText="停用"
                />
              )
            }
          }
        },
        {
          formItem: {
            formType: 'textarea',
            label: '备注',
            key: 'remark',
            placeholder: '请输入备注'
          }
        }
      ]
    }
  ])

  return {
    dictDataForm,
    dictDataFormOptions,
    resetDictDataForm
  }
}
